<template>
    <header class="header">
        <div class="logo">
            <img @click="navigateHome" src="../assets/logo-h@2x.png" alt="Logo" />
        </div>
        <nav class="nav" v-if="navShow">
            <router-link to="/content/trade" active-class="active-border">
                {{ $t('tabbar.Transaction') }}
            </router-link>
            <router-link to="/content/ipo" active-class="active-border">
                {{ $t('tabbar.IPO') }}
            </router-link>
            <router-link to="/content/otc" active-class="active-border">
                {{ $t('tabbar.OTC') }}
            </router-link>
            <router-link to="/content/news" active-class="active-border">
                {{ $t('home.News') }}
            </router-link>
        </nav>
        <div class="vbvbaaa">
            <login-button />
        </div>
    </header>
</template>
  
<script setup>
import { useI18n } from 'vue-i18n';
import LoginButton from './LoginButton.vue';
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted, watch, computed,defineProps } from 'vue';

const props = defineProps({  
        navShow: {
            type: Boolean,
            required: true
        }
    })

let phoneFlag = ref(false);
const router = useRouter();

// 跳转到首页
const navigateHome = () => {
    router.push('/');  // 跳转到首页
};

// 使用 i18n
const { t, locale } = useI18n();

</script>


  
<style scoped lang="less">
.navbar.fixed {
    position: fixed;
    /* 当添加 .fixed 类时，导航栏变为固定定位 */
    top: 0;
    /* 固定在顶部 */
    left: 0;
    /* 保证水平对齐 */
    width: 100%;
    /* 保证导航栏宽度填满页面 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* 添加阴影效果以增强层次感 */
}

.header {
    height: 60px;
    width:100%;
    // min-width:1200px;
    display: flex;
    justify-content: left;
    align-items: center;
    box-sizing:border-box;
    // box-shadow: 0px 4px 4px 0px rgba(207, 207, 207, 0.25);
    position: sticky;
    top: 0;
    z-index: 999;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    /* 平滑过渡动画，0.3秒 */
    background-color: #18191e;


    .nbmvcs,
    .nav_phone,
    .hghg {
        display: none;
    }

    .logo {
        cursor: pointer;
        display: flex;
        flex-wrap: nowrap;
        vertical-align: top;
        align-items: center;
        margin-left: 30px;
        img {
            width: 145px;
            height: 28px;
            cursor: pointer;
            margin-right: 50px;

        }

        h3 {
            font-size: 20px;
        }
    }

    .nav {
        padding-left: 15px;
        box-sizing:border-box;
        // flex-grow: 1;

        a {
            text-decoration: none;
            /* 去掉下划线 */
            /* 使颜色继承父元素颜色 */
            outline: none;
            /* 去掉焦点时的轮廓线（一般点击后的蓝色边框） */
            margin-right: 30px;
            color: #fafafa;
            padding: 5px 12px;
            box-sizing:border-box;
            font-size: 14px;
        }
    }

    .vbvbaaa {
        flex-grow: 1;
        display: flex;
        justify-content: end;
        height: 100%;
        position: relative;
    }


}
</style>
  